<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="../lib/three.js/build/three.min.js"></script>
<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var cube = null;
    var alpha = 0;

    function init() {
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')    //绑定元素
        });

        renderer.shadowMapEnabled = true;  //打开渲染器的地图阴影,告诉渲染器渲染阴影
        renderer.shadowMapSoft = true;  //实现软阴影的效果

        scene = new THREE.Scene();  //创建场景

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);        //创建照相机 加入到场景中
        camera.position.set(5, 15, 25);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8, 16, 16),           //绘制平面 加入材质
            new THREE.MeshLambertMaterial({ color: 0xcccccc }));
        plane.rotation.x = -Math.PI / 2;
        plane.position.y = -1;
        plane.receiveShadow = true;     //地面接收阴影 ，对于接收阴影的物体调用
        scene.add(plane);
        
        cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),              //创建立方体 加入材质
            new THREE.MeshLambertMaterial({ color: 0x00ff00 }));
        cube.position.x = 2;
        cube.castShadow = true;     //物体产生阴影 ,对于光源以及所有要产生阴影的物体调用
        scene.add(cube);

        var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);  //创建光线   聚光灯
        light.position.set(2, 5, 3);
        light.target = cube;
        light.castShadow = true;   //灯光生成阴影 ,对于光源以及所有要产生阴影的物体调用
        light.shadowCameraNear = 2; //阴影的平截头体区域near属性
        light.shadowCameraFar = 10; //阴影的平截头体区域far属性
        light.shadowCameraFar = 10;
        light.shadowCameraVisible = true;    //shadowCameraVisible设置为true,会在场景中显示灯光的框架,方便调试  
        light.shadowMapWidth = 1024;    //阴影贴图宽度,单位像素,默认512  
        light.shadowMapHeight = 1024;   //阴影贴图高度,单位像素,默认512  
        light.shadowDarkness = 0.3;     //阴影对物体亮度的影响,默认是0.5 

        scene.add(light);

        // ambient light
        var ambient = new THREE.AmbientLight(0x666666);
        scene.add(ambient);

        requestAnimationFrame(draw);
    }

    function draw() {
        alpha += 0.01;
        if (alpha > Math.PI * 2) {
            alpha -= Math.PI * 2;
        }
        cube.position.set(2 * Math.cos(alpha), 0, 2 * Math.sin(alpha));
        renderer.render(scene, camera);
        requestAnimationFrame(draw);
    }

</script>
</body>

</html>

<!--
在 Three.js 中，能形成阴影的光源只有 THREE.DirectionalLight 与 THREE.SpotLight ；而
相对地，能表现阴影效果的材质只有 THREE.LambertMaterial 与 THREE.PhongMaterial 。

对于聚光灯，需要设置 shadowCameraNear 、 shadowCameraFar 、 shadowCameraFov 三个
值，类比我们在第二章学到的透视投影照相机，只有介于 shadowCameraNear 与
shadowCameraFar 之间的物体将产生阴影， shadowCameraFov 表示张角。
对于平行光，需要设置 shadowCameraNear 、 shadowCameraFar 、 shadowCameraLeft 、
shadowCameraRight 、 shadowCameraTop 以及 shadowCameraBottom 六个值，相当于正交投
影照相机的六个面。同样，只有在这六个面围成的长方体内的物体才会产生阴影效果。
为了看到阴影照相机的位置，通常可以在调试时开启 light.shadowCameraVisible =
true 。




-->